<template>
  <el-form ref="form" :model="user" :rules="rules" label-width="100px" class="reset-pwd-form">
    <el-form-item label="旧密码" prop="oldPassword">
      <el-input 
        v-model="user.oldPassword" 
        placeholder="请输入旧密码" 
        type="password" 
        show-password
        prefix-icon="el-icon-lock"
      />
    </el-form-item>
    
    <el-form-item label="新密码" prop="newPassword">
      <el-input 
        v-model="user.newPassword" 
        placeholder="请输入新密码" 
        type="password" 
        show-password
        prefix-icon="el-icon-key"
      />
    </el-form-item>
    
    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input 
        v-model="user.confirmPassword" 
        placeholder="请确认新密码" 
        type="password" 
        show-password
        prefix-icon="el-icon-check"
      />
    </el-form-item>
    
    <div class="pwd-tips">
      <i class="el-icon-info-circle"></i>
      <span>密码长度必须在6-20个字符之间，建议使用字母、数字和特殊字符的组合</span>
    </div>
    
    <el-form-item class="form-footer">
      <el-button type="primary" @click="submit" icon="el-icon-check">保存</el-button>
      <el-button type="danger" @click="close" icon="el-icon-close">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { updateUserPwd } from "@/api/system/user";

export default {
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.user.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      user: {
        oldPassword: undefined,
        newPassword: undefined,
        confirmPassword: undefined
      },
      // 表单校验
      rules: {
        oldPassword: [
          { required: true, message: "旧密码不能为空", trigger: "blur" }
        ],
        newPassword: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
        ],
        confirmPassword: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { required: true, validator: equalToPassword, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
            this.$modal.msgSuccess("修改成功");
          });
        }
      });
    },
    close() {
      this.$tab.closePage();
    }
  }
};
</script>

<style lang="scss" scoped>
.reset-pwd-form {
  padding: 20px;
  max-width: 500px;
  margin: 0 auto;
  
  .el-input {
    width: 100%;
    
    &.is-focus {
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
    }
  }
  
  .el-form-item__label {
    font-weight: 500;
  }
  
  .pwd-tips {
    background-color: #ecf8ff;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #409EFF;
    display: flex;
    align-items: flex-start;
    
    i {
      margin-right: 5px;
      margin-top: 3px;
    }
  }
  
  .form-footer {
    text-align: center;
    margin-top: 30px;
    
    .el-button {
      padding: 10px 20px;
      transition: all 0.3s;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      }
    }
  }
}
</style>
